<style>
    .calendar {
        background-color: #fff;
    }

    .calendar__header {
        display: flex;
        justify-content: space-between;
        padding: 12px 20px;
        border-bottom: 1px solid #ebeef5;
    }

    .calendar__body {
        padding: 12px 20px 35px;
    }

    .calendar-table {
        table-layout: fixed;
        width: 100%;
    }

    .calendar-table thead th {
        padding: 12px 0;
        color: #606266;
        font-weight: 400;
    }

    .calendar-table:not(.is-range) td.next,
    .calendar-table:not(.is-range) td.prev {
        color: #c0c4cc;
    }

    .calendar-table tr th:first-child,
    .calendar-table tr td:first-child {
        border-left: 1px solid #ebeef5;
    }

    .calendar-table tr:first-child th,
    .calendar-table tr:first-child td {
        border-top: 1px solid #ebeef5;
    }

    .calendar-table th,
    .calendar-table td {
        border-bottom: 1px solid #ebeef5;
        border-right: 1px solid #ebeef5;
        vertical-align: top;
        transition: background-color .2s ease;
    }

    .calendar-table .calendar-day {
        box-sizing: border-box;
        height: 85px;
        position: relative;
        line-height: 85px;
        text-align: center;
        font-size: 16px;
        font-weight: bold;
    }

    .calendar-table td.today {
        color: #409eff;
    }


    .disabled {
        background-color: #f5f7fa;
        color: #c0c4cc;
        cursor: not-allowed;
    }

    .work:after {
        content: " ";
        position: absolute;
        left: 50%;
        bottom: 10px;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        width: 6px;
        height: 6px;
        background: #ff873d;
        border-radius: 50%;
    }
</style>
<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main">

        <div class="section">
            <div class="title-row">
                <div class="title-left">
                    <div class="title-info">
                        <div class="title-line"></div>
                        <span class="title-text">日历</span>
                    </div>
                </div>
                <div class="title-right">
                    <span class="title-right-text"></span>
                </div>
            </div>

        </div>



        <div class="calendar">
            <div class="calendar__header">
                <div class="calendar__title">
                    <input type="text" name="datePeriodStart" autocomplete="off" id="current_month"
                        class="layui-input w100" placeholder="选择日期">
                </div>
                <div class="calendar__button-group">
                    <div class="el-button-group"><button type="button"
                            class="el-button el-button--plain el-button--mini"><!----><!----><span>
                                上个月
                            </span></button><button type="button"
                            class="el-button el-button--plain el-button--mini"><!----><!----><span>
                                今天
                            </span></button><button type="button"
                            class="el-button el-button--plain el-button--mini"><!----><!----><span>
                                下个月
                            </span></button></div>
                </div>
            </div>
            <div class="calendar__body">
                <table cellspacing="0" cellpadding="0" class="calendar-table" id="calendar-table">
                    <thead>
                        <th>一</th>
                        <th>二</th>
                        <th>三</th>
                        <th>四</th>
                        <th>五</th>
                        <th>六</th>
                        <th>日</th>
                    </thead>
                    <tbody>
                        <tr class="calendar-table__row">
                            <td class="prev">
                                <div class="calendar-day"><span></span></div>
                            </td>
                            <td class="current disabled">
                                <div class="calendar-day work"><span>1</span></div>
                            </td>
                            <td class="current">
                                <div class="calendar-day"><span>2</span></div>
                            </td>
                            <td class="current is-selected today">
                                <div class="calendar-day"><span>3</span></div>
                            </td>
                            <td class="current">
                                <div class="calendar-day"><span>4</span></div>
                            </td>
                            <td class="current">
                                <div class="calendar-day"><span>5</span></div>
                            </td>
                            <td class="current">
                                <div class="calendar-day"><span>6</span></div>
                            </td>
                        </tr>
                        <tr class="calendar-table__row">
                            <td class="current">
                                <div class="calendar-day"><span>7</span></div>
                            </td>
                            <td class="current">
                                <div class="calendar-day"><span>8</span></div>
                            </td>
                            <td class="current">
                                <div class="calendar-day"><span>9</span></div>
                            </td>
                            <td class="current">
                                <div class="calendar-day"><span>10</span></div>
                            </td>
                            <td class="current">
                                <div class="calendar-day"><span>11</span></div>
                            </td>
                            <td class="current">
                                <div class="calendar-day"><span>12</span></div>
                            </td>
                            <td class="current">
                                <div class="calendar-day"><span>13</span></div>
                            </td>
                        </tr>
                        <tr class="calendar-table__row">
                            <td class="current">
                                <div class="calendar-day"><span>14</span></div>
                            </td>
                            <td class="current">
                                <div class="calendar-day"><span>15</span></div>
                            </td>
                            <td class="current">
                                <div class="calendar-day"><span>16</span></div>
                            </td>
                            <td class="current">
                                <div class="calendar-day"><span>17</span></div>
                            </td>
                            <td class="current">
                                <div class="calendar-day"><span>18</span></div>
                            </td>
                            <td class="current">
                                <div class="calendar-day"><span>19</span></div>
                            </td>
                            <td class="current">
                                <div class="calendar-day"><span>20</span></div>
                            </td>
                        </tr>
                        <tr class="calendar-table__row">
                            <td class="current">
                                <div class="calendar-day"><span>21</span></div>
                            </td>
                            <td class="current">
                                <div class="calendar-day"><span>22</span></div>
                            </td>
                            <td class="current">
                                <div class="calendar-day"><span>23</span></div>
                            </td>
                            <td class="current">
                                <div class="calendar-day"><span>24</span></div>
                            </td>
                            <td class="current">
                                <div class="calendar-day"><span>25</span></div>
                            </td>
                            <td class="current">
                                <div class="calendar-day"><span>26</span></div>
                            </td>
                            <td class="current">
                                <div class="calendar-day"><span>27</span></div>
                            </td>
                        </tr>
                        <tr class="calendar-table__row">
                            <td class="current">
                                <div class="calendar-day"><span>28</span></div>
                            </td>
                            <td class="current">
                                <div class="calendar-day"><span>29</span></div>
                            </td>
                            <td class="current">
                                <div class="calendar-day"><span>30</span></div>
                            </td>
                            <td class="current">
                                <div class="calendar-day"><span>31</span></div>
                            </td>
                            <td class="next">
                                <div class="calendar-day"><span></span></div>
                            </td>
                            <td class="next">
                                <div class="calendar-day"><span></span></div>
                            </td>
                            <td class="next">
                                <div class="calendar-day"><span></span></div>
                            </td>
                        </tr>

                    </tbody>
                </table>
            </div>
        </div>

    </div>
</div>
<script src="/lib/layui-v2.11.4/layui.js" charset="utf-8"></script>

<script>
    layui.use(['form', 'laydate', 'util'], function () {
        var form = layui.form;
        var layer = layui.layer;
        var laydate = layui.laydate;
        var util = layui.util;

        // 自定义验证规则
        form.verify({
            pass: function (value) {
                if (!/(.+){6,12}$/.test(value)) {
                    return '密码必须 6 到 12 位';
                }
            }
        });

        // 指定开关事件
        form.on('switch(switchTest)', function (data) {
            layer.msg('开关 checked：' + (this.checked ? 'true' : 'false'), {
                offset: '6px'
            });
            layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是 ON|OFF', data.othis)
        });

        // 提交事件
        form.on('submit(demo1)', function (data) {
            var field = data.field; // 获取表单字段值
            // 显示填写结果，仅作演示用
            layer.alert(JSON.stringify(field), {
                title: '当前填写的字段值'
            });
            // 此处可执行 Ajax 等操作
            // …
            return false; // 阻止默认 form 跳转
        });

        // 日期
        laydate.render({
            elem: '#date'
        });

        // 普通事件
        util.on('lay-on', {
            // 获取验证码
            "get-vercode": function (othis) {
                var isvalid = form.validate('.demo-phone'); // 主动触发验证，v2.7.0 新增 
                // 验证通过
                if (isvalid) {
                    layer.msg('手机号规则验证通过');
                    // 此处可继续书写「发送验证码」等后续逻辑
                    // …
                }
            }
        });
    });</script>